<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,viewport-fit=cover,initial-scale=1,maximum-scale=5,minimal-ui">
	<meta name="format-detection" content="telephone=no,email=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="description" content="还卡超人隶属于拍拍贷旗下，原名还还。它可以帮用户信用卡账单分期，然后用户再还款给还卡超人。还卡超人利息低，额度高。资料填写简单，审核速度快。">
	<meta name="keywords" content="手机还卡超人官网,拍拍贷,互联网金融,P2P借贷平台,还卡超人">
	<title>极速办卡</title>
	<style>
		html {
			font-size: 16px;
		}
		body {
			max-width: 750px;
			margin: 0 auto;
			color: #262626;
			font-family: "Helvetica Neue",\5FAE\8F6F\96C5\9ED1,Tohoma,sans-serif;
			font-size: 15px;
			background-color: #ffffff;
		}
		section {
			background-color: #f1f1f8;
		}
		header {
			height: 5.4375rem;
			background-color: #ffffff;
		}
		header.bottom-line {
			border-bottom: 1px solid #d8d8d8;
		}
		h2,
		h3,
		ul,
		li,
		p {
			margin: 0;
			font-weight: normal;
		}
		h2 {
			height: 5.4375rem;
			margin: 0 1.75rem;
			font-size: 1.1em;
			line-height: 5.4375rem;
		}
		h3 {
			font-size: 1.05em;
		}
		ul {
			padding: 0;
			list-style: none;
		}
		li {
			padding: 0;
		}
		.recommand-list {
			padding: 0.625rem 0.75rem;
		}
		.recommand-list::after {
			content: "";
			display: table;
			clear: both;
		}
		.recommand-list li {
			overflow: hidden;
			position: relative;
			float: right;
			width: 23.75rem;
			width: 52%;
			height: 10rem;
			margin: 0.625rem 0.75rem 0.625rem 0.625rem;
			-webkit-border-radius: 0.5rem;
			-moz-border-radius: 0.5rem;
			border-radius: 0.5rem;
			background-color: #ffffff;
		}
		.recommand-list li:first-child {
			float: left;
			width: 18.875rem;
			width: 41%;
			height: 21.25rem;
			margin: 0.625rem 0.625rem 0.625rem 0.75rem;
		}
		a {
			text-decoration: none;
			color: #262626;
		}
		.recommand-list a {
			display: block;
			overflow: hidden;
			height: 100%;
		}
		.recommand-list h3,
		.recommand-list p {
			overflow: hidden;
			width: 11.2rem;
			width: 47.15%;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.recommand-list li:first-child h3,
		.recommand-list li:first-child p {
			width: auto;
		}
		.recommand-list h3 {
			margin: 2.125rem 1.875rem 0;
			margin: 2.125rem 7.89% 0;
		}
		.recommand-list p {
			margin: 0.625rem 1.875rem 0;
			margin: 0.625rem 7.89% 0;
			color: #8d8d8d;
			font-size: 0.9em;
		}
		.recommand-list img {
			position: absolute;
			top: 0;
			right: 0;
			width: 7.75rem;
			width: 32.63%;
			height: 5rem;
			height: auto;
			margin: 2.5rem 1.875rem 0 0;
			margin: 2.5rem 7.89% 0 0;
		}
		.recommand-list li:first-child img {
			position: static;
			width: 15.125rem;
			width: 80.13%;
			height: 9.375rem;
			height: auto;
			margin: 1.5rem 1.875rem 0;
			display: block;
			margin: 1.5rem auto 0;
		}
		.progress-link {
			position: relative;
			float: right;
			height: 5.4375rem;
			margin-top: -5.4375rem;
			margin-right: 1.875rem;
			padding: 0 1.5em 0 0.6em;
			font-size: 1em;
			line-height: 5.4375rem;
		}
		.progress-link::before,
		.progress-link::after {
			content: "";
			overflow: hidden;
			position: absolute;
			top: 1.84375rem;
			width: 0;
			height: 0;
			border: 0.875rem solid transparent;
			color: transparent;
			background: transparent;
		}
		.progress-link::before {
			right: -0.875rem;
			border-left: 0.875rem solid #8d8d8d;
		}
		.progress-link::after {
			right: -0.5rem;
			border-left: 0.875rem solid #ffffff;
		}
		.bank-list {
			background-color: #ffffff;
		}
		.bank-list::after {
			content: "";
			display: table;
			clear: both;
		}
		.bank-list li {
			overflow: hidden;
			position: relative;
			float: left;
			width: 50%;
			height: 16.25rem;
			text-align: center;
		}
		.bank-list li:nth-child(odd)::before {
			content: "";
			position: absolute;
			top: 6.875rem;
			right: 0;
			width: 1px;
			height: 2.5rem;
			background-color: #d8d8d8;
		}
		.bank-list a {
			display: block;
		}
		.bank-list a {
			display: block;
			height: 100%;
		}
		.bank-list img {
			width: 5.5rem;
			height: 5.5rem;
			margin-top: 2.5rem;
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			border-radius: 50%;
			background-color: #f4f3f8;
		}
		.bank-list i {
			position: absolute;
			top: 2rem;
			left: 58%;
			height: 2.75rem;
			padding: 0 1.375rem;
			-webkit-border-radius: 1.375rem;
			-moz-border-radius: 1.375rem;
			border-radius: 1.375rem;
			color: #ffffff;
			font-size: 0.8em;
			font-style: normal;
			line-height: 2.75rem;
		}
		.bank-list h3 {
			margin-top: 0.5rem;
		}
		.bank-list p {
			margin-top: 0.375rem;
			color: #8d8d8d;
			font-size: 0.9em;
		}
		.loading {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 10;
			-webkit-perspective: 100px;
			perspective: 100px;
			width: 0;
			height: 0;
			background-color: rgba(0,0,0,0.4);
			-webkit-background-size: 2.5rem;
			background-size: 2.5rem;
		}
		.loading.show {
			display: block;
			width: 100%;
			height: 100%;
		}
		.loading img {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 2.5rem;
			height: 2.5rem;
			margin: -1.25rem;
			/*-webkit-box-shadow: 0 0 0.1rem #ffffff;
			-moz-box-shadow: 0 0 0.1rem #ffffff;
			box-shadow: 0 0 0.1rem #ffffff;
			-webkit-animation: loading 2s infinite;
			-moz-animation: loading 2s infinite;
			animation: loading 2s infinite;*/
		}
		@-webkit-keyframes loading {
			0% {
				-webkit-transform: rotateY(0deg);
			}
			30% {
				-webkit-transform: rotateY(180deg);
			}
			35% {
				-webkit-transform: rotateY(180deg);
			}
			65% {
				-webkit-transform: rotateY(360deg);
			}
			100% {
				-webkit-transform: rotateY(360deg);
			}
		}
		@-moz-keyframes loading {
			0% {
				-moz-transform: rotateY(0deg);
			}
			30% {
				-moz-transform: rotateY(180deg);
			}
			35% {
				-moz-transform: rotateY(180deg);
			}
			65% {
				-moz-transform: rotateY(360deg);
			}
			100% {
				-moz-transform: rotateY(360deg);
			}
		}
		@keyframes loading {
			0% {
				transform: rotateY(0deg);
			}
			30% {
				transform: rotateY(180deg);
			}
			35% {
				transform: rotateY(180deg);
			}
			65% {
				transform: rotateY(360deg);
			}
			100% {
				transform: rotateY(360deg);
			}
		}
	</style>
	<script src="//m.ppdaicdn.com/act/huan/js/sensors_analytics.js?v=1"></script>
</head>
<body>
	<section>
		<header>
			<h2>今日推荐</h2>
		</header>
		<ul id="recommand-list" class="recommand-list"></ul>
	</section>
	<section>
		<header class="bottom-line">
			<h2>热门银行</h2>
			<a class="progress-link" href="apply_progress.html">办卡进度</a>
		</header>
		<ul id="bank-list" class="bank-list"></ul>
	</section>
	<div class="loading">
		<!--<img src="" alt="加载中">-->
		<img src="" alt="加载中">
	</div>
	<script>
		/* 工具方法 */
		var $elm = function (elm, attr, innerHtml) {
			if (attr) {
				var _elm = document.createElement(elm);
				Object.keys(attr).forEach(function (key) {
					_elm.setAttribute(key, attr[key]);
				});
				if (innerHtml) {
					_elm.innerHTML = innerHtml;
				}
				return _elm;
			}
			return document.querySelector(elm);
		};
		var showLoading = function () {
			//$elm('.loading').setAttribute('class', 'loading show');
		};
		var sensorsAnalyticsClick = function (elm) {
			sa.track('h5_clk', {
				'tgt_event_id': elm.getAttribute('tgt_event_id'),
				'tgt_name': elm.getAttribute('tgt_name'),
				'tgt_type': elm.getAttribute('tgt_type'),
				'position': elm.getAttribute('position'),
				'url': location.href,
				'target_url': ''
			});
		};
		var navigateH5Url = function (url) {
			try {
				WebViewJavascriptBridge.callHandler('navigateH5Url', {
					'code': 1,
					'name': '极速办卡跳转页面',
					'data': {
						'url': url
					}
				});
			} catch(ex) {
				try {
					AppBridge.navigateH5Url(url);
				} catch (ex) {
					location.assign(url);
				}
			}
		};

		/* 设置页面宽度 */
		$elm('html').setAttribute('style', 'font-size: ' + 16 * Math.min(window.screen.availWidth, 750) / 750 + 'px');

		/* 生成界面 */
		var applyData = function () {
			for (var i = 0; i < recommandListData.length; ++i) {
				var item = recommandListData[i];
				var _li = $elm('li', {});
				var _a = $elm('a', {
					//'href': item.link,
					'tgt_event_id': item.sensors.tgt_event_id,
					'tgt_name': item.sensors.tgt_name,
					'tgt_type': item.sensors.tgt_type,
					'position': item.sensors.position,
					'onclick': 'showLoading(), sensorsAnalyticsClick(this), navigateH5Url("' + item.link + '")'
				});
				_a.appendChild($elm('h3', {}, item.title));
				_a.appendChild($elm('p', {}, item.desc));
				_a.appendChild($elm('img', { 'src': item.img }));
				_li.appendChild(_a);
				$elm('#recommand-list').appendChild(_li);
			}
			for (var i = 0; i < bankListData.length; ++i) {
				var item = bankListData[i];
				var _li = $elm('li', {});
				var _a = $elm('a', {
					//'href': item.link_bank,
					'tgt_event_id': item.sensors_bank.tgt_event_id,
					'tgt_name': item.sensors_bank.tgt_name,
					'tgt_type': item.sensors_bank.tgt_type,
					'position': item.sensors_bank.position,
					'onclick': 'showLoading(), sensorsAnalyticsClick(this), navigateH5Url("' + item.link_bank + '")'
				});
				_a.appendChild($elm('img', { 'src': item.img }));
				item.tag && _a.appendChild($elm('i', { 'style': 'background-color: ' + item.bkg }, item.tag));
				_a.appendChild($elm('h3', {}, item.title));
				_a.appendChild($elm('p', {}, item.desc));
				_li.appendChild(_a);
				$elm('#bank-list').appendChild(_li);
			}
		};

		/* 注册WebViewJavascriptBridge */
		var injectWebViewJavascriptBridge = function (callback) {
			if (window.WebViewJavascriptBridge) {
				return callback();
			}
			// ios
			if (window.WVJBCallbacks) {
				return window.WVJBCallbacks.push(callback);
			}
			window.WVJBCallbacks = [callback];
			var WVJBIframe = document.createElement('iframe');
			WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
			WVJBIframe.style.display = 'none';
			document.body.appendChild(WVJBIframe);
			setTimeout(function () {
				document.body.removeChild(WVJBIframe);
				// ios appbridge
				if (!window.WebViewJavascriptBridge) {
					callback();
				}
			}, 0);
		};
		/* 注册WebViewJavascriptBridge回调 */
		var injectWebViewJavascriptBridgeCallback = function () {
		};
		injectWebViewJavascriptBridge(injectWebViewJavascriptBridgeCallback);
	</script>
	<script src="//m.ppdaicdn.com/act/huan/js/apply_data.js?v=20"></script>
</body>
</html>
